<template>
    <div class="backend-layout">
      <!-- 侧边栏 -->
      <Sidebar class="sidebar" />
  
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <header class="header">
          <Navbar />
        </header>
        
        <!-- 标签页导航 -->
        <Tabs class="tabs" />
  
        <!-- 页面内容 -->
        <main class="page-content">
          <el-scrollbar>
            <div class="page-container">
              <router-view />
            </div>
          </el-scrollbar>
        </main>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useUserStore } from '@/store/user'
  import { useAppStore } from '@/store/app'
  import { useRouter } from 'vue-router'
  import { ElMessageBox } from 'element-plus'
  import Sidebar from '@/components/backend/Sidebar.vue'
  import Navbar from '@/components/backend/Navbar.vue'
  import Tabs from '@/components/backend/Tabs.vue'
  
  const userStore = useUserStore()
  const appStore = useAppStore()
  const router = useRouter()
  
  const handleCommand = (command) => {
    switch (command) {
      case 'profile':
        router.push('/admin/profile')
        break
      case 'logout':
        ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userStore.clearUserInfo()
          router.push('/login')
        })
        break
    }
  }
  </script>
  
  <style lang="scss" scoped>
  
  .backend-layout {
    display: flex;
    height: 100vh;
    background-color: #f5f7fa;
    position: relative;
    overflow: hidden;
  
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 1001;
      height: 100vh;
      width:180px;
    }
  
    .main-content {
      flex: 1;
      height: 100vh;
      margin-left: 180px;
      display: flex;
      flex-direction: column;
      position: relative;
      background: linear-gradient(135deg, #f5f7fa 0%, #f7f9fc 100%);
      overflow: hidden;
    }
  
    .header {
      height: 60px;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      flex-shrink: 0;
    }
    
    .tabs {
      height: 40px;
      flex-shrink: 0;
      background: #fff;
      border-bottom: 1px solid #eee;
    }
  
    .page-content {
      flex: 1;
      position: relative;
      overflow: hidden;
      
      .el-scrollbar {
        height: 100%;
      }
      
      .page-container {
        
        min-height: 100%;
        box-sizing: border-box;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, 
            rgba(64, 158, 255, 0.1), 
            rgba(103, 194, 58, 0.1)
          );
          pointer-events: none;
        }
      }
    }
  }
  
  // 响应式设计
  @media screen and (max-width: 768px) {
    .backend-layout {
      .main-content {
        margin-left: 0;
      }
      
      .page-container {
        padding: 16px;
      }
    }
  }
  </style>